<template>
  <div class="app-container" v-if="vif">
    <div class="order-details">
      <!-- 赏金补充、发起者接口不完善 -->
      <!-- 订单状态 -->
      <section class="order clearfix">
        <h3>订单状态</h3>
        <div class="order-status">
          <div class="os-bd">
            <span class="order-id"
              >订单编号：<i>{{ formData.id }}</i></span
            >
            <span class="order-status-detail">
              状态：
              <el-tag :type="formData.status | statusFilter">{{
                formData.status
              }}</el-tag>
            </span>
          </div>
          <el-button
            @click="confirm"
            class="status-btn"
            type="danger"
            :disabled="this.formData.status != '已付款，待审核'"
            >确认</el-button
          >
          <el-button
            @click="returnMoney"
            class="status-btn"
            type="primary"
            :disabled="this.formData.status != '已收货，待打钱'"
            >结算</el-button
          >
          <el-button
            @click="refundMoney"
            class="status-btn"
            type="warning"
            :disabled="isRefunding()"
            >退款</el-button
          >
          <el-form
            ref="form"
            :model="formData"
            label-width="80px"
            class="user-info"
          >
            <el-form-item label="状态" class="lable-status">
              <el-select
                v-model="formData.status"
                placeholder="订单状态"
                @change="selectChange"
              >
                <el-option
                  label="已下单，待付款"
                  value="已下单，待付款"
                ></el-option>
                <el-option
                  label="已付款，待审核"
                  value="已付款，待审核"
                ></el-option>
                <el-option
                  label="审核通过，待接单"
                  value="审核通过，待接单"
                ></el-option>
                <el-option
                  label="已接单，待发货"
                  value="已接单，待发货"
                ></el-option>
                <el-option
                  label="已发货，待收货"
                  value="已发货，待收货"
                ></el-option>
                <el-option
                  label="已收货，待打钱"
                  value="已收货，待打钱"
                ></el-option>
                <el-option label="已完成" value="已完成"></el-option>
                <el-option
                  label="未付款，取消订单"
                  value="未付款，取消订单"
                ></el-option>
                <el-option label="审核未通过" value="审核未通过"></el-option>
                <el-option
                  label="审核通过，取消订单"
                  value="审核通过，取消订单"
                ></el-option>
                <el-option
                  label="无人接单，取消订单"
                  value="无人接单，取消订单"
                ></el-option>
                <el-option
                  label="未发货，取消接单"
                  value="未发货，取消接单"
                ></el-option>
                <el-option label="已退款" value="已退款"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div class="order-otherinfo">
          <ul>
            <li class="pay-method">
              付款方式：<span>{{ formData.pay_way }}</span>
            </li>
            <li class="pay-id">
              订单号：<br /><span>{{ formData.order_id }}</span>
            </li>
            <li class="pay-time">
              付款时间：<span>{{ formData.pay_time }}</span>
            </li>
            <li class="create-time">
              订单创建时间：<span>{{ formData.create_at | showTime }}</span>
            </li>
          </ul>
        </div>
      </section>

      <!-- 商品信息 -->
      <section class="item-info clearfix">
        <h3>商品信息</h3>
        <div class="item-hd">
          <a href="javascript:;" class="item-name">{{ formData.goods_name }}</a>
          <span
            >型号：<i class="item-type">{{ formData.goods_type }}</i></span
          >
          <span class="item-count">数量：{{ formData.goods_number }}</span>
          <span class="item-price">单价：{{ formData.single_price }}</span>
          <span class="item-bounty">赏金：{{ formData.bounty }}</span>
        </div>
        <div class="item-bd clearfix">
          <ul>
            <li>
              最晚时间：
              <span class="latest-time">{{ formData.end_date }}</span>
            </li>
            <li>
              购买方式：
              <span class="purchase-route">{{ formData.buy_way }}</span>
            </li>
            <li>
              购买地点：
              <span class="purchase-region">{{ formData.goods_region }}</span>
            </li>
            <li>
              购买机构：
              <span class="purchase-instructions">{{
                formData.buy_way_instructions
              }}</span>
            </li>
            <li>
              备注：
              <p>
                {{ formData.note }}
              </p>
            </li>
          </ul>
          <div class="total-price">
            总金额：<span>￥{{ formData.total_price }}</span>
          </div>
        </div>
      </section>
      <!-- 留言板 -->
      <section class="note">
        <h3>留言列表</h3>
        <el-button
          type="danger"
          @click="delAllNote"
          class="delAllNote_btn"
          size="mini"
          >删除该订单下所有留言</el-button
        >
        <div class="tips" v-if="this.notes.length === 0">
          暂时没有留言~
        </div>
        <ul class="note-ul">
          <li v-for="(note, index) in notes" :key="index">
            <router-link
              :to="`/userApply/applydetail/${note.openid}`"
              class="name"
              ><img :src="note.avatarUrl" alt="" />
              {{ `${note.name}(${note.nickname})` }}</router-link
            >
            <p class="note_content">
              {{ note.content }}
            </p>
            <div class="note_time">{{ note.create_at | showTime }}</div>
            <el-button
              @click="delNote(note.note_id)"
              type="danger"
              class="delNote_btn el-icon-delete"
              title="删除留言"
              size="mini"
            ></el-button>
          </li>
        </ul>
      </section>
      <!-- 顾客商家 -->
      <section class="both-sides">
        <h3>顾客商家</h3>
        <div class="customer">
          <div class="customer-info">发起者信息</div>
          <span
            >发起人：
            <router-link
              :to="`/userApply/applydetail/${formData.buyer_openid}`"
              class="name"
            >
              {{ formData.buyer_name }}
            </router-link>
          </span>
        </div>
        <div class="agent">
          <div class="agent-info">接单者信息</div>
          <span>接单人：</span>
          <router-link
            :to="`/userApply/applydetail/${formData.seller_openid}`"
            class="name"
          >
            {{ formData.seller_name }}
          </router-link>
          <span>手机号：{{ formData.seller_phone }}</span>
        </div>
      </section>
      <!-- 配送信息 -->
      <section class="delivery">
        <h3>物流信息</h3>
        <div class="consignee-info">
          <span>收货人信息</span>
          <ul>
            <li>
              收货人：<strong>{{ formData.buyer_name }}</strong>
            </li>
            <li>
              地址：<strong>{{
                `${formData.buyer_provinces} | ${formData.buyer_address}`
              }}</strong>
            </li>
            <li>
              手机号码：<strong>{{ formData.buyer_phone }}</strong>
            </li>
          </ul>
        </div>
        <div class="logistics-info">
          配送信息
          <p>
            <a href="https://www.kuaidi100.com/">快递100查询</a>
            <span>物流编号：{{ formData.courier }}</span>
          </p>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import "@/styles/mixin.scss";
import "@/styles/common.css";
import { parseTime } from "@/utils/index";
import { updateOrder, getOrderDetail } from "@/api/order";
import { getNote, deleteNote } from "@/api/note";
export default {
  data() {
    return {
      status: "待确认",
      orderId: 0, // 订单号
      formData: {}, // 对应的id JSON
      notes: {}, //留言列表
      vif: false //如果不带orderid进入页面不显示
    };
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        "已下单，待付款": "info",
        "已付款，待审核": "danger",
        "审核通过，待接单": "warning",
        "已接单，待发货": "primary",
        "已发货，待收货": "primary",
        "已收货，待打钱": "danger",
        已完成: "success",
        "未付款，取消订单": "danger",
        审核未通过: "info",
        "审核通过，取消订单": "danger",
        "无人接单，取消订单": "danger",
        "未发货，取消接单": "danger",
        已退款: "info"
      };
      return statusMap[status];
    },
    // 时间展示
    showTime(t) {
      return parseTime(new Date(t));
    }
  },
  created() {
    if (this.$route.params.orderId === ":orderId") {
      this.$message({
        message: "请从订单列表进入此页面",
        type: "error"
      });
      return;
    }
    this.orderId = this.$route.params.orderId;
    this.fetchData();
    this.fetchNote();
    this.vif = true;
  },
  methods: {
    async fetchData() {
      const { data } = await getOrderDetail({ id: this.orderId });
      this.formData = data.data.order;
    },
    async fetchNote() {
      const { data } = await getNote({ order_id: this.orderId });
      this.notes = data.data.reverse();
    },
    // 提示刷新：信息，是否刷新
    tipRefresh(msg, isFresh) {
      this.$message({
        message: msg,
        type: "success",
        duration: 1500,
        onClose: () => {
          if (isFresh) {
            window.location.reload(); //更新页面
          }
        }
      });
    },
    // 订单
    confirm() {
      updateOrder(this.orderId, { status: "审核通过，待接单" }).then(res => {
        this.tipRefresh(res.data.meta.msg, true);
      });
    },
    returnMoney() {
      updateOrder(this.orderId, { status: "已完成" }).then(res => {
        this.tipRefresh(res.data.meta.msg, true);
      });
    },
    selectChange() {
      updateOrder(this.orderId, { status: this.formData.status }).then(res => {
        this.tipRefresh(res.data.meta.msg, false);
      });
    },
    refundMoney() {
      updateOrder(this.orderId, { status: "已退款" }).then(res => {
        this.tipRefresh(res.data.meta.msg, true);
      });
    },
    isRefunding() {
      return (
        this.formData.status != "未付款，取消订单" &&
        this.formData.status != "审核未通过" &&
        this.formData.status != "审核通过，取消订单" &&
        this.formData.status != "无人接单，取消订单" &&
        this.formData.status != "未发货，取消接单"
      );
    },
    // 留言
    delAllNote() {
      this.$confirm("此操作将删除此订单下所有留言, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        // 发删除请求
        deleteNote({ order_id: this.orderId }).then(res => {
          this.tipRefresh(res.data.meta.msg, true);
        });
      });
    },
    delNote(noteID) {
      this.$confirm("确认删除此留言?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        // 发删除请求
        deleteNote({ note_id: noteID }).then(res => {
          this.tipRefresh(res.data.meta.msg, true);
        });
      });
    }
  }
};
</script>

<style scoped>
h2 {
  margin: 5px 0 15px;
}
h3 {
  margin: 0;
  padding: 12px 16px;
  border-bottom: 1px solid #ececec;
  font-size: 18px;
}
.order-details {
  min-width: 800px;
}
/* 订单状态 */
.order-status,
.order-otherinfo {
  float: left;
}

/* 订单状态左侧 */
.order-status {
  padding: 12px;
  border-right: 1px solid #ececec;
}
.order-id,
.order-status-detail {
  padding: 12px 4px;
}
.order-id i {
  font-style: normal;
  font-weight: 700;
  color: #409eff;
}
.status-btn {
  margin: 10px 8px 12px;
  font-size: 18px;
  text-align: center;
}
.lable-status {
  margin-left: -16px;
  margin-bottom: 0;
}
/* 订单状态右侧 */
.order-otherinfo li {
  margin-bottom: 4px;
  padding-bottom: 4px;
  padding-right: 12px;
}
.pay-id {
  line-height: 22px;
}
.pay-id span {
  display: inline-block;
  text-indent: 1em;
}
/* 商品信息 */
/* 商品信息上侧 */
.item-hd {
  padding: 12px 16px 4px;
}
.item-name {
  display: block;
  margin-bottom: 8px;
}
.item-name:hover {
  color: #409eff;
}

.item-hd span {
  color: #acacac;
  margin-right: 40px;
}
.item-type {
  font-style: normal;
}
/* 商品信息下侧 */
.item-bd ul {
  padding-left: 20px;
}
.item-bd li {
  float: left;
  padding-right: 12px;
  margin-right: 12px;
  margin-bottom: 8px;
  border-right: 1px solid #ccc;
}
.item-bd li:nth-child(n + 4) {
  border-right: 0;
}
.item-bd li p {
  margin: 6px 0 0;
  padding-right: 20px;
  text-indent: 1.5em;
}
.item-bd .total-price {
  float: right;
  margin: 0 30px;
  padding-bottom: 14px;
}
/* 留言区 */
.note {
  position: relative;
}
.tips {
  padding: 12px 16px;
  font-size: 18px;
  color: #666;
}
.delAllNote_btn {
  position: absolute;
  top: 8px;
  right: 16px;
}
.note-ul {
  padding-left: 0;
  margin-top: 0;
}
.note li {
  position: relative;
  display: block;
  padding: 8px 16px;
  border-bottom: 1px solid #e5e9ef;
}
.note img {
  float: left;
  width: 48px;
  height: 48px;
  margin-right: 8px;
  border-radius: 50%;
  vertical-align: top;
}
.note .note_content {
  max-width: 100%;
  margin: 8px;
  margin-left: 56px;
  margin-right: 56px;
  word-break: break-all;
}
.note .note_time {
  margin-left: 56px;
  color: #99a2aa;
}
.delNote_btn {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
}
/* 顾客商家 */
.customer,
.agent {
  padding: 12px 20px;
}
.customer-info,
.agent-info {
  font-size: 18px;
}
.customer span,
.agent span {
  display: inline-block;
  margin-top: 8px;
  text-indent: 2em;
}
.name {
  color: #409eff;
  font-style: normal;
}
.customer {
  border-bottom: 1px solid #ececec;
}
.agent span {
  padding-bottom: 4px;
}
/* 物流信息 */
/* 收货人信息 */
.delivery {
  margin-bottom: 400px;
}

.consignee-info {
  padding: 12px 20px;
  border-bottom: 1px solid #ececec;
}
.consignee-info ul {
  margin-top: 12px;
  padding-left: 20px;
}
.consignee-info ul li {
  margin-bottom: 6px;
}
/* 配送信息 */
.logistics-info {
  padding: 12px 20px;
}
.logistics-info p {
  margin: 8px 20px;
}
.logistics-info a {
  color: #409eff;
}
.logistics-info p span {
  margin: 0 20px;
}
</style>
